<template>
	<view class="fu-p-y-30">
		<demo-desc margin="0 15px">
			此组件底部圆弧效果
		</demo-desc>
		
		<fu-section title="背景色banner" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<view class="fu-relative fu-hidden" style="height: 150px;">
			<fu-banner-arc height="150"></fu-banner-arc>
		</view>
		
		<fu-section title="背景色banner" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<view class="fu-relative fu-hidden" style="height: 175px;">
			<fu-banner-arc height="175" bgColor="linear-gradient(to bottom, #F27635, #FBC42E)">
				<view class="fu-text-c" style="line-height: 175px;">自定义内容</view>
			</fu-banner-arc>
		</view>
		
		<fu-section title="图片banner" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<view class="fu-relative fu-hidden">
			<fu-banner-arc height="120" bgColor="transparent">
				<fu-image width="100%" height="320" src="https://img0.baidu.com/it/u=1628883470,653026077&fm=253&fmt=auto&app=138&f=PNG?w=1080&h=360" mode="widthFix"></fu-image>
			</fu-banner-arc>
		</view>
	</view>
</template>

<script>
</script>

<style>
</style>